<template>
    <div>
        用户名：<input type="text"> <br/>
        密码：<input type="text"> <br/>
    </div>
</template>

<script>
export default {
   created(){
       console.log("我出生了");
   },
   destroyed(){
       console.log("我没了！");
   },
/**
 * 被缓存的组件如何知道当前是处于隐藏状态还是处于显示状态呢？
 * 答：vue扩展了两个钩子函数来监听
 *      activated： 当该钩子函数触发的时候，表示当前组件显示出来了（激活了）
 *      deactivated：当钩子函数触发的时候，表示当前组件隐藏起来了（非激活状态）
 * 
 * */    
   activated(){
       console.log("我显示出来了");
   },
   deactivated(){
       console.log("我隐藏起来了");
   }
}
</script>

<style>

</style>